<template>
    <div id="backcont">
        <div class="meituan-content">
            <div class="login-content">
                <div class="system-user-register">
                    <p>专业</p>
                    <el-select v-model="value2" class="m-2" placeholder="请选择专业" size="large">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>

                <div class="system-user-register">
                    <p>班级</p>
                    <div v-if="value2 == '计算机科学与技术'">
                        <el-select v-model="value3" class="m-2" placeholder="请选择班级" size="large">
                            <el-option v-for="item in options3" :key="item.value" :label="item.label"
                                :value="item.value" :disabled="item.disabled" />
                        </el-select>
                    </div>
                    <div v-if="value2 == '软件工程'">
                        <el-select v-model="value3" class="m-2" placeholder="请选择班级" size="large">
                            <el-option v-for="item in options4" :key="item.value" :label="item.label"
                                :value="item.value" :disabled="item.disabled" />
                        </el-select>
                    </div>
                    <div v-if="value2 == '网络工程'">
                        <el-select v-model="value3" class="m-2" placeholder="请选择班级" size="large">
                            <el-option v-for="item in options5" :key="item.value" :label="item.label"
                                :value="item.value" :disabled="item.disabled" />
                        </el-select>
                    </div>
                </div>

                <div class="system-user-register">
                    <p>学号</p>
                    <el-input v-model="sno" class="inputflex" size="large"/>
                </div>

                <div class="system-user-register">
                    <p>姓名</p>
                    <el-input v-model="cname" class="inputflex" size="large"/>
                </div>

                <div class="system-user-register">
                    <p>密码</p>
                    <el-input v-model="password"  
                        class="inputflex"
                        type="password"
                        show-password
                        size="large"
                     />
                </div>
                <el-button type="primary"  @click = "register" class = "meituan-btn">注册</el-button>
            </div>
        </div>

    </div>

</template>
<script>
import {ref} from 'vue'
import { reactive,toRefs,getCurrentInstance} from "vue";
export default {
    setup () {
        const value2 = ref('')
        const value3 = ref('')
        const {proxy} = getCurrentInstance()
        const user = reactive({
            sno:'', 
            cname:'',                                                                        
            password:'',                                                                   
        })
        const options2 = [
            {
                value: '计算机科学与技术',
                label: '计算机科学与技术',
            },
            {
                value: '软件工程',
                label: '软件工程',
            },
            {
                value: '网络工程',
                label: '网络工程',
            },
        ]
        var options3 = [
            {
                value: '计科201',
                label: '计科201',
                disabled: false,
            },
            {
                value: '计科202',
                label: '计科202',
                disabled: false,
            },
            {
                value: '计科203',
                label: '计科203',
                disabled: false,
            },
            {
                value: '计科204',
                label: '计科204',
                disabled: false,
            },
            {
                value: '计科205',
                label: '计科205',
                disabled: false,
            },
            {
                value: '计科206',
                label: '计科206',
                disabled: false,
            },
        ]
        var options4 = [
            {
                value: '软件201',
                label: '软件201',
                disabled: false,
            },
            {
                value: '软件202',
                label: '软件202',
                disabled: false,
            },
            {
                value: '软件203',
                label: '软件203',
                disabled: false,
            },
            {
                value: '软件204',
                label: '软件204',
                disabled: false,
            },
        ]
        var options5 = [
            {
                value: '网络201',
                label: '网络201',
                disabled: false,
            },
            {
                value: '网络202',
                label: '网络202',
                disabled: false,
            },
            {
                value: '网络203',
                label: '网络203',
                disabled: false,
            },
            {
                value: '网络204',
                label: '网络204',
                disabled: false,
            },
        ]
         const register = async()=>{
           // console.log(proxy.$urls.m().register)
            const obj = {
                sno:user.sno,
                cname:user.cname,
                password:user.password,
                sname:value2.value,
                cno:value3.value
                }
            try {
            const res = await new proxy.$request(proxy.$urls.m().register,obj).modepost()
            console.log(res)
            if(res.status == 200){
               console.log(res)
                 new proxy.$tips(res.data.msg,'success').mess_age()
            }
            // }else{
            //     console.Consol.log(res)
            //     new proxy.$tips('注册成功','success').mess_age()
            // }
            } catch (e) {
                console.log(e)
                new proxy.$tips(e,'error').mess_age()
            }

        }
        return {
             value2, value3, options2, options3, options4, options5,...toRefs(user),register
        }
    }
}
</script>

<style>
.login-content{
    width: 600px;
    height: 400px;
    background:#dbebf3;
    border-radius: 5px;
    opacity:80%;
}
.meituan-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.system-user-register{
    width:400px;
    margin: 0 auto;
    padding-top: 30px;
    height: 40px;
    display: flex;
    align-items: center;
}
.system-user-register p{
        width: 50px;
    font-size: 16px;
}

.meituan-btn{
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto 0 auto;
    font-size: 16px;
}

.inputflex{
    size: 10px;
}
</style>